<template>
	<view class="mine-content" :style="'height:'+ conHeight+'px'">
		<view class="mine-header">
			<view>
				<up-icon name="setting" color="#8f8f8f" size="28"></up-icon>
				<up-icon name="scan" color="#8f8f8f" size="28"></up-icon>
			</view>
			
			<view>
				<image :src="userInfo.value?.avatar"></image>
				<view>
					<view class="mine-title1" @click="login">
						{{token ? userInfo.value?.username : '点击登录'}}
						<image v-if="userInfo.value?.vipInfo" :src="userInfo.value?.vipInfo?.vipIcon"></image>
					</view>
					<view class="mine-title2" @click="edit">
						{{token ? '编辑资料' : '登录同步数据，学习更安全'}}
					</view>
				</view>
			</view>
		</view>
	    <view class="mine-banner" v-if="userInfo.value?.vipInfo">
	    	<view>
				<image src="/static/image/vip.png" mode=""></image>
	    		<view>VIP会员</view>
	    	</view>
			<view>
				<view>
					{{userInfo.value?.vipInfo.vipName}}<image :src="userInfo.value?.vipInfo?.vipIcon"></image>
				</view>
				<view>
					有效期至：{{formateDate(userInfo.value?.vipInfo?.endTime)}}
				</view>
			</view>
			<view>
				会员中心
			</view>
	    </view>
		<view class="mine-card-item" :class="{'mine-card-last2-item': index == itemList.length - 1}" v-for="(item,index) in itemList" :key="item.id">
			<up-icon :name="item.icon" color="#8f8f8f" size="20"></up-icon>
			<text class="item-desc">{{item.name}}</text>
			<up-icon class="right-icon" name="arrow-right" color="#8f8f8f" size="20"></up-icon>
		</view>
		<view v-if="token" class="mine-card-item mine-card-logout" @click="logout">退出登录</view>
	</view>
</template>

<script setup>
import {getViewHeight} from '../../utils/data.js'
import {getUserinfo} from '../../api/user.js'
import {formateDate} from '../../utils/format.js'
import { nextTick, onMounted, reactive, ref,computed } from 'vue'
import store from '@/store/index.js'
const itemList = [
	{id: 1,name: '购物车',icon: 'shopping-cart'},
	{id: 2,name: '我的订单',icon: 'order'},
	{id: 3,name: '我的余额',icon: 'rmb-circle'},
	{id: 4,name: '电子兑换码',icon: 'coupon'},
	{id: 5,name: '关于我们',icon: 'account'}
]
const token = store.state.user.token
const userInfo = reactive({})
const conHeight = ref(0)
const login = ()=>{
	if (token) return
	uni.reLaunch({
		url: '/pages/login/index'
	})
}
const logout = () => {
	store.commit('clearUserInfo')
	uni.reLaunch({
		url: '/pages/login/index'
	})
}
const edit = () => {
	if (!token) return
}
onMounted(()=>{
	nextTick(async ()=>{
		let res = await getUserinfo({token})
		userInfo.value = res.data.data
		conHeight.value = getViewHeight()
	})
})
</script>

<style lang="scss">		
.mine-content{
	background-color: #f5f5f5;
	overflow: auto;
	.mine-header{
		padding: 20rpx;
		background-color: #fff;
		>view:nth-child(1){
			display: flex;
			justify-content: flex-end;
			.u-icon:nth-child(1) {
				margin-right: 50rpx;
			}
		}
		>view:nth-child(2){
			display: flex;
			align-items: center;
			>image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
				margin-right: 20rpx;
			}
			.mine-title1{
				font-size: 35rpx;
				font-weight: 700;
				display: flex;
				align-items: center;
				>image{
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
			}
			.mine-title2{
				font-size: 25rpx;
				color:#bdbdbd;
			}
		}
	}
	
		
	.mine-banner{
		margin: 0 20rpx 50rpx 20rpx;
		padding: 0 20rpx;
		height: 200rpx;
		background: linear-gradient(to right,#46455e,#353043);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 25rpx;
		>view:nth-child(1){
			position: relative;
			text-align: center;
			&::after{
				content: '';
				width: 2rpx;
				height: 100%;
				background-color: #fff;
				position: absolute;
				right: -50%;
				top: 50%;
				transform: translateY(-50%);
			}
			>image{
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}
			
		}
		>view:nth-child(2) {
			>view:nth-child(1) {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
		>view:nth-child(3) {
			background: linear-gradient(to right, #fef3d3, #fae1a9);
			color: #353043;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			font-weight: 700;
		}
	}
	.mine-card-item{
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 2rpx;
		color: #7b7b7b;
		font-size: 30rpx;
		font-weight: 700;
	}
	.mine-card-last2-item{
		margin-top: 20rpx;
	}
		
	.mine-card-logout{
		margin-top: 100rpx;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	.item-desc{
		flex: 1;
		text-align: left;
		margin-left: 20rpx;
	}
}

</style>
